<template>
	<view class="container">
		<view @click="viewPage(goods.order_blind_box_id)" class="item" :key="g">
			<u-image :src="goods.product_image" width="160" height="160" border-radius="16" mode="widthFix"></u-image>
			<view class="info-box">
				<view class="name">{{goods.product_name}}</view>
				<!-- <view class="tips-box" v-if="current == 0">
					<text class="tips">还可被赠送{{goods.give_number_surplus}}次</text>
				</view> -->
				<view class="tips-box" v-if="current == 2">
					<text class="tips">已回收 {{recovery}}折</text>
				</view>
				<view class="flex-user">
					<view class="left-user" v-if="current == 1 && goods.give_state == 1">
					<!-- <view class="left-user"> -->
						<image :src="goods.receive_user" class="icon avatar"></image>
						<text class="label">已收下</text>
					</view>
				</view>
				<view class="flex-user">
					<view class="left-user" v-if="current == 1 && goods.give_state == 2">
					<!-- <view class="left-user"> -->
						<!-- <image :src="goods.receive_user" class="icon avatar"></image> -->
						<text class="label">已赠送</text>
					</view>
				</view>
				<view class="price">
					<view class="label market">参考价 ¥{{goods.product_price}}</view>
					<!-- <text class="unit market">¥ </text>
					<text class="money market">{{goods.product_price}}</text> -->
					<view class="">
						<text class="label blind" v-if="goods.source==1">拆盒价</text>
						<text class="label blind" v-else>购买价格</text>
						<text class="unit blind">¥ </text>
						<text class="money blind">{{goods.blind_box_price}}</text>
					</view>
				</view>
			</view>
			
		</view>
		

		<view class="recover-border" v-if="current == 2">
			<view>回收时间 {{$u.timeFormat(goods.retrieve_time, 'yyyy.mm.dd hh:MM:ss')}}</view>
			<view><text>回收价</text>{{goods.retrieve_amount}}玉石</view>
		</view>
		<!-- 商品详情 -->
		<u-popup v-model="showDetail" mode="bottom" border-radius="32">
			<view class="box-detail">
				<view class="headers">藏品详情</view>
				<view class="detail-wrap">
					<scroll-view class="detail-scroll-view" scroll-y="true">
						<view class="name">{{curProduct.product_name}}</view>
						<view class="price">
							<text class="tips">参考价 ¥{{curProduct.product_price}}</text>
							<!-- <text class="unit">¥ </text>
							<text class="money">{{curProduct.product_price}}</text> -->
						</view>
						<view class="intro">
							<u-parse :html="curProduct.product_detail" :tag-style="tagStyle"></u-parse>
						</view>
					</scroll-view>
				</view>
			</view>
		</u-popup>

	</view>
</template>

<script>
	export default {
		name: "recover",
		props: ['goods', 'current', 'recovery'],
		data() {
			return {
				showDetail: false,
				curProduct: {},
			};
		},
		computed: {
			titleStyle() {
				return {
					fontSize: '36rpx',
					color: '#000000',
				}
			},
			contentStyle() {
				return {
					fontSize: '32rpx',
					color: '#666',
				}
			},
			cancelStyle() {
				return {
					fontSize: '34rpx',
					color: '#000000',
					borderTop: '2rpx solid rgba(0, 0, 0, 0.1)',
				}
			},
			confirmStyle() {
				return {
					fontSize: '34rpx',
					color: '#576B95',
					borderLeft: '2rpx solid rgba(0, 0, 0, 0.1)',
					borderTop: '2rpx solid rgba(0, 0, 0, 0.1)',
				}
			},
		},
		methods: {
			viewPage(order_blind_box_id) {
				this.$net.req('/order/detail', {
					id: order_blind_box_id
				}, false).then(res => {
					if (res.code === 200) {
						this.showDetail = true
						this.curProduct = res.data
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.container {
		background-color: #161616; //藏品列表颜色
		// padding-bottom: 20rpx;
		margin-bottom: 20rpx;
		border-radius: 20rpx;
	}

	.recover-border {
		border-top: 2rpx solid #F6F6F6;
		padding: 0 20rpx;
		padding-top: 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;

		view:nth-child(1) {
			height: 32rpx;
			font-size: 24rpx;
			font-family: HarmonyOS_Sans_SC;
			color: #C3C2C1;
			line-height: 32rpx;
		}

		view:nth-child(2) {
			height: 32rpx;
			font-size: 32rpx;
			font-family: HarmonyOS_Sans_SC;
			color: #F8852A;
			line-height: 32rpx;

			text {
				font-size: 24rpx;
			}
		}
	}

	.flex-user {
		width: 100%;
		position: relative;
		top: 5rpx;
		left: 300rpx;
		padding: 0 20rpx;
	}

	.left-user {
		width: 150rpx;
		height: 48rpx;
		background: rgba(248, 133, 42, 0.16);
		border-radius: 24rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 24rpx;
		font-family: HarmonyOS_Sans_SC;
		color: #F8852A;
		padding: 4rpx;
		.icon.avatar {
			width: 40rpx;
			height: 40rpx;
			margin-left: 2rpx;
			border-radius: 20rpx;
		}

		.label {
			text-align: center;
			width: 100rpx;
			margin-right: 8rpx;
		}
	}

	button {
		background-color: transparent;
	}

	button::after {
		border: none;
		background-color: transparent;
	}


	.box-detail {
		width: 750rpx;
		background: #292C2D;
		border-radius: 32rpx 32rpx 0 0;
		padding: 32rpx 24rpx;

		.headers {
			height: 40rpx;
			font-size: 32rpx;
			font-weight: bold;
			color: #BFC0C0;
			line-height: 40rpx;
			text-align: center;
		}

		.detail-wrap {
			// height: 834rpx;
			margin-top: 48rpx;
			padding-bottom: 20rpx;
			.name {
				font-size: 32rpx;
				font-weight: bold;
				color: #BFC0C0;
				line-height: 48rpx;
				white-space: nowrap;
				text-overflow: ellipsis;
				overflow: hidden;
			}

			.price {
				height: 40rpx;
				font-size: 36rpx;
				color: #2E2B2B;
				line-height: 40rpx;
				margin-top: 20rpx;
				display: flex;
				align-items: center;
				.unit {
					font-size: 24rpx;
					margin-right: 10rpx;
				}

				.money {
					font-weight: bold;
				}

				.tips {
					font-size: 24rpx;
					color: #999;
					line-height: 32rpx;
					// margin-left: 20rpx;
				}
			}

			.intro {
				margin-top: 32rpx;
			}
		}
	}
</style>
